<script setup>
import { ref,getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
let numberExchange = ref(proxy.$numberExchange)
const baseUrl = ref(import.meta.env.VITE_APP_BASE_URL)
const { $t } = proxy;
// 扭蛋分类数组
// let eggSortInfoList = reactive([{},{},{},{},{},{},{},{},{},])
const emit = defineEmits(['emitId','maskShow2Change','buyEmit','toPageEmit'])
const props = defineProps({
    
    detailInfo:{
        type:Object,
        default:{}
    },
    maskShow2:{
        type:Boolean,
        default:false
    },
    isShow:{
        type:Boolean,
        default:true
    }
})
// 关闭弹窗
const maskShow2Change=()=>{
    emit('maskShow2Change',false)
}
const buy =()=>{
    emit('buyEmit',props.detailInfo.relBoxList[0].id)
    
}

const toPage =()=>{
    emit('toPageEmit',props.detailInfo.relBoxList[0].id)
    
}
if(props.detailInfo){
console.log(props.detailInfo,'de7899')
}
</script>

<template>
     <!-- 扭蛋详情弹窗 -->
     <div class="mask" style="z-index: 500;" v-if="maskShow2">
        <div class="dialog">
            
            <div class="dialogTitleBox">
                <div>{{detailInfo?.name}}</div>
                <img src="../../assets/img/prize/close.png" @click="maskShow2Change" alt="">
            </div>
            <div class="leavleBox"> 
                <img :src="(baseUrl +'/'+ detailInfo?.img)" alt="">
                <div>{{detailInfo?.typeName}}</div>
            </div>
            <div :class="isShow ?'dialogInfoBox' : 'dialogInfoBox marbot16'">
                <!-- <div class="dialogInfoItems">
                    <div class="dialogInfoItemsText">获取它</div>
                    <div class="dialogInfoItemsMoney">
                        <img src="../../assets/img/header/money.png" alt="">
                        <div>{{detailInfo?.val}}</div>
                    </div>
                </div> -->
                <div class="dialogInfoItems">
                    <div class="dialogInfoItemsText">{{$t('msg.message.cashVal')}}</div>
                    <div class="dialogInfoItemsMoney">
                        <img src="../../assets/img/header/money.png" alt="">
                        <div>{{numberExchange( detailInfo?.val)}}</div>
                    </div>
                </div>
                <div class="dialogInfoItems">
                    <div class="dialogInfoItemsText">{{$t('msg.message.cashVal')}}</div>
                    <div class="dialogInfoItemsMoney">
                        <!-- <img src="../../assets/img/header/money.png" alt=""> -->
                        <div>{{$t('msg.message.free')}}</div>
                    </div>
                </div>
                
            </div>
            <div class="prisentBox" v-if="isShow">
                <div class="prisentBoxTitle">
                    {{$t('msg.message.prizeexistsinthefollowingEgg')}}
                </div>
                <div class="prisentBoxBig">
                    <div class="prisentBoxItem"  @click="toPage" v-for="(item) in detailInfo?.relBoxList" :key="item.id">
                        <img class="prisentBoxItImg" :src="baseUrl +'/'+ item?.img" alt="">
                        <div class="prisentBoxItemCount">
                            <img src="../../assets/img/header/money.png" alt="">
                            <div>{{numberExchange(item.price)}}</div>
                        </div>
                    </div>
                </div>
                
                <!-- <div class="btnb" style="width:40%;">
                    <el-button color="#5BCE3A" class="sureBtn" @click="buy">购买</el-button>
                   
                </div>
                <div class="btnb" style="width:40%;">
                    <el-button color="#5BCE3A" class="sureBtn" @click="toPage">发现</el-button>
                   
                </div> -->
            </div>
        </div>

    </div>
</template>

<style scoped>
.btnb{

}
.marbot16{
    margin-bottom: 16px;
    border-bottom: 1px solid #999; 
}
.btnb >>>.el-button {
    width: 100%;
    color: #fff;
    /* background: #FC8704; */
    height: 48px;
    font-size: 20px;
}
/* 充值弹窗遮罩层 */
.mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 15;
}

.dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 588px;
    /* height: 540px; */
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 40px 40px;
    background: #282828;
}
.dialogTitleBox{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.dialogTitleBox div{
    font-size: 20px;
    width: 95%;
    padding-left: 9px;
}
.dialogTitleBox img{
    width: 16px;
    cursor: pointer;
}
.leavleBox{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 61px;
    padding-bottom: 18px;
}
.leavleBox div{
    background: linear-gradient(90deg, #8A37FD 0%, #B58FFE 100%);
    font-size: 16px;
    width: 81px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 50px;
    margin-top: 52px;
}
.leavleBox img{
    height: 104px;
}
.dialogInfoBox{
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 16px;
    padding: 20px 0;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
}
.dialogInfoItems{
    display: flex;
    flex-direction: column;   
    align-items: center;
}
.dialogInfoItemsText{
    font-size: 16px;
    padding-bottom: 11px;
}
.dialogInfoItemsMoney{
    display: flex;
    align-items: center;
}
.dialogInfoItemsMoney img{
    width: 16px;
    margin-right: 2px;
}
.dialogInfoItemsMoney div{
    font-size: 16px;
    color: #FC8704;
}
.prisentBox{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.prisentBoxTitle{
    font-size: 16px;
    text-align: left;
    padding: 16px 0;
}
.prisentBoxBig{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.prisentBoxItem{
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    margin-right: 15px;
}
.prisentBoxItImg{
    height: 76px;
}
.prisentBoxItemCount{
    display: flex;
    align-items: center;
    padding-top: 4px;
}
.prisentBoxItemCount img{
    width: 16px;
}
.prisentBoxItemCount div{
    font-size: 16px;
    padding-left: 2px;
}
</style>
